<template>
	<view>
		 <uni-nav-bar left-icon="back" fixed title="积分明细"></uni-nav-bar>
			<view class="tui-top-relative">
				<!---->
				<view class="tui-integral">
					<view class="tui-align-h1">
						<view>
							当前 <text class="top">{{userInfo.integral || 0}}</text> 个积分
						</view>
					</view>
					<view class="tui-flex tui-header-btm">
						<view class="tui-btm-item tui-flex">
							<view class="tui-btm-num">{{userInfo.cumuIntegral || 0}}</view>
							<view class="tui-btm-text">累计获得</view>
						</view>
						<view class="tui-btm-item tui-flex">
							<view class="tui-btm-num">{{userInfo.csmIntegral || 0}}</view>
							<view class="tui-btm-text">累计消费</view>
						</view>
					</view>
				</view>
				<view class="tui-box">
					<view class="tui-cell-header">
						<!--<view class="tui-cancle"></view>-->
						<view>积分收支明细</view>
					</view>
				</view>

				<view class="navbar">
					<view v-for="(item, index) in navList" :key="index"
					      class="nav-item"
					      :class="{current: tabCurrentIndex === index}"
					      @click="tabClick(index)"
					>
						{{item.name}}
					</view>
				</view>

				<!--内容区-->
				<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
					<swiper-item v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
						<scroll-view class="list-scroll-content" scroll-y @scrolltolower="getList">
							<!-- 积分列表 -->
							<view class="tui-box" v-for="(item, index) in tabItem.liList" :key="index">
								<view class="tui-flex detail">
									<view class="flex-left">
										<view class="title">{{item.consumeItemName}}</view>
										<view class="time">{{item.createTime}} </view>
									</view>
									<view class="flex-right" :style="{color: item.type == 0 ? '#6CB041':'red'}">
										<text v-if="item.type == 0">+{{item.number}}</text>
										<text v-else>-{{item.number}}</text>
									</view>
								</view>
							</view>
							<view class="tui-tail">
								<text>- 到底了 -</text>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import NewsList from '../NewsList/NewsList.vue'
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
	
	export default {
		name: 'integral',
		components: {
			NewsList, uniLoginModel
		},
		name: 'integral',
		data() {
			return {
                tabCurrentIndex: 0,
				list: [],
				detaList: [
					{number: 0,today: '累计获得'},
					{number: 0,today: '累计使用'}
				],
				contentList: [ "全部", "获得", "使用" ],
                navList:[
					{ name: '全部', type: 2,  loadingType: 'more', liList: [] },
					{ name: '获得', type: 0,  loadingType: 'more', liList: [] },
					{ name: '使用', type: 1,  loadingType: 'more', liList: [] },
				],
			}
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
		onShow() {
		},
		onLoad() {
			console.log(this.userInfo)
            this.getList()
		},
		methods: {
			getList() {
                let index = this.tabCurrentIndex;
                let navItem = this.navList[index];
                let type = navItem.type;
                if(navItem.loadingType === 'loading'){
                    return;		//防止重复加载
                }
                navItem.loadingType = 'loading';
                uni.showLoading({title: ''})
				this.$api.api('integral').then(res => {
					// this.list = res.data
                    if (res.code == 200) {
                        let orderList = res.data.filter(item => {
                            item = Object.assign(item,)
                            if(type === 2){
                                return item;
                            }
                            return item.type === type
                        })
                        orderList.forEach(item=>{
                            navItem.liList.push(item);
                        })
                        uni.hideLoading();
                    } else {
                        uni.hideLoading();
                        this.$api.msg(res.message)
                    }
				}).catch(error => {
				})
			},
            //swiper 切换
            changeTab(e){
                this.tabCurrentIndex = e.target.current;
                this.getList('tabChange');
            },
            //顶部tab点击
            tabClick(index){
                this.tabCurrentIndex = index;
            },
		}
	}
</script>

<style lang="scss">
	.tui-top-relative {
		.tui-integral {
			width: 100%;
			min-height: 340rpx;
			background-color: #6CB041;
			color: #fff;
			.tui-align-h1 {
				padding: 80rpx 20rpx 20rpx;
				text-align: center;
				font-size: 30rpx;
				.top {
					font-size: 46rpx;
					padding: 0 10rpx;
				}
			}
			.tui-header-btm {
				width: 100%;
				position: absolute;
				left: 0;
				top: 290rpx;
				.tui-btm-item {
					flex: 1;
					flex-direction: column;
					.tui-btm-num {
						font-size: $uni-font-size-lg;
						font-weight: 600;
						position: relative;
					}
					.tui-btm-text {
						padding-top: 4rpx;
					}
				}
			}
		}
		.tui-box {
			background-color: $uni-bg-color;
			/*margin-top: $uni-spacing-row-lg;*/
		}
		.tui-cell-header {
			padding: 30rpx 26rpx 15rpx;
			border-bottom: 1px solid #f3f3f3;
			text-align: center;
			font-size: 32rpx;
			.tui-cancle {
				width: 10rpx;
				height: 36rpx;
				background-color: #F9CE84;
				margin-right: $uni-spacing-row-base;
			}
		}
		.uni-tab-bar .active{
			color: #FC5A44;
			font-size: $uni-font-size-md;
		}
	}

	.navbar {
		display: flex;
		background-color: $uni-bg-color;
		height: 80rpx;
		padding: 0 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,.06);
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30rpx;
			color: $uni-text-color-grey;
			position: relative;
			&.current{
				color: #000000;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 80rpx;
					height: 0;
					border-bottom: 6rpx solid $uni-color-success;
				}
			}
		}
	}
	.swiper-box {
		/*height: calc(100% - 40px);*/
		height: calc(100vh - 40px);
		padding-bottom: 40rpx;
		margin-top: 30rpx;
		.list-scroll-content {
			height: 100%;
			.detail {
				padding: 30rpx 20rpx;
				border-bottom: 2rpx solid #eee;
				.flex-left {
					flex: 1;
					text-align: left;
					line-height: 1.5;
					.title {
						font-size: 34rpx;
						color: #000000;
					}
					.time {
						color: #999;
					}
				}
				.flex-right {
					text-align: right;
					font-size: 36rpx;
				}
			}
		}
	}
</style>
